<!-- Layout container -->
<div class="layout-container">
    <!-- include _ (layout-navbar.html) -->

    <!-- Layout content -->
    <div class="layout-content   h-100" id="layout-content">

        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y  h-100">

            <!-- include    _  (post-title.html) -->

<!--            <div class="card p-3">-->

<!--                <article class="markdown-body single-content">-->
<!--                    {{ post.content }}-->
<!--                </article>-->


<!--            </div>-->


            <div class="chat-wrapper  h-100">

                <!-- Make card full height of `.chat-wrapper` -->
                <div class="card flex-grow-1 position-relative overflow-hidden ">

                    <!-- Make row full height of `.card` -->
                    <div class="row no-gutters h-100">
                        <div class="chat-sidebox col">

                            <!-- Chat contacts header -->
                            <div class="flex-grow-0 px-4">
                                <div class="media align-items-center">
                                    <div class="media-body">
                                        <input type="text" class="form-control chat-search my-3" placeholder="Search...">
                                    </div>
                                    <a href="javascript:void(0)" class="chat-sidebox-toggler d-lg-none d-block text-muted text-large font-weight-light pl-3">&times;</a>
                                </div>
                                <hr class="border-light m-0">
                            </div>
                            <!-- / Chat contacts header -->

                            <!-- Wrap `.chat-scroll` to properly position scroll area. Remove this wtapper if you don't need scroll -->
                            <div class="flex-grow-1 position-relative">
                                <div class="chat-contacts list-group chat-scroll py-3" style="padding: 10px;" >




                                    <!-- <ul id="toc_container" class="py-1" style="list-style: none; padding-left: 0;"></ul> -->

                                    <ul id="toc_container" style="list-style: none; padding-left: 0;"></ul>

                                </div><!-- / .chat-contacts -->
                            </div>

                        </div>
                        <div class="d-flex col flex-column">

                            <!-- Chat header -->
                            <div class="flex-grow-0 py-3 pr-4 pl-lg-4">

                                <div class="media align-items-center">
                                    <a href="javascript:void(0)" class="chat-sidebox-toggler d-lg-none d-block text-muted text-large px-4 mr-2"><i class="ion ion-md-more"></i></a>


<!--                                    <div class="media-body pl-3">-->
<!--                                        <h1>Kenneth Frazier</h1>-->
<!--                                        <div class="text-muted small"><em>Typing...</em></div>-->
<!--                                    </div>-->

                                    <!-- include(post-title.html) -->

                                    <!-- <div>
                                      <button type="button" class="btn btn-primary rounded-pill icon-btn mr-1"><i class="ion ion-ios-call"></i></button>
                                      <button type="button" class="btn btn-secondary rounded-pill icon-btn mr-1"><i class="ion ion-md-videocam"></i></button>
                                      <button type="button" class="btn btn-default rounded-pill icon-btn"><i class="ion ion-ios-more"></i></button>
                                    </div> -->
                                </div>

                            </div>
                            <hr class="flex-grow-0 border-light m-0">
                            <!-- / Chat header -->

                            <!-- Wrap `.chat-scroll` to properly position scroll area. Remove this wtapper if you don't need scroll -->
                            <div class="flex-grow-1 position-relative">

                                <!-- Remove `.chat-scroll` and add `.flex-grow-1` if you don't need scroll -->
                                <div class="chat-scroll p-4 v-scroll-spy markdown-body" id="article_with_toc">

                                    {{ post.content }}



                                </div><!-- / .chat-messages -->
                            </div>

                        </div>
                    </div><!-- / .row -->

                </div><!-- / .card -->

            </div><!-- / .chat-wrapper -->
        </div>
        <!-- / Content -->
    </div>
    <!-- Layout content -->

</div>
<!-- / Layout container -->


